<template>
  <div id="log">
    <van-field
      :border="flag"
      v-model="username"
      placeholder="请输入用户名"
      clickable
      @touchstart.native.stop="show = true"
    />
    <div>
      <input class="pwd" type="password" v-model="password" placeholder="请输入密码" />
    </div>
    <van-button class="btn" @click="load" type="primary" size="large" :color="genggai">注册</van-button>

  </div>
</template>

<script>
import * as api from "../api/User";
import { Dialog } from "vant";
export default {
  name: "phone",
  data() {
    return {
      flag: false,
      username: "",
      password: "",
      show: false,
      value: "",
      yanzheng: "",
      color: "#d2d2d2"
    };
  },
  computed: {
    genggai: function() {
      if (this.value !== "" && this.yanzheng !== "") {
        return "#000000";
      } else {
        return "#d2d2d2";
      }
    }
  },
  methods: {
    load() {
      console.log(this.username);
      console.log(this.password);
      api.addUser({ uname: this.username, upwd: this.password }).then(data => {
        if (data.data.code == "400") {
          Dialog.alert({
            message: "用户名已存在！"
          });
        }else{
            this.$router.push('/login');
        }
      });
    }
  }
};
</script>

<style  scoped>
.van-hairline van-key {
  height: 600px;
  width: 100%;
}
.van-cell {
  border-bottom: 1px solid #cccccc;
  height: 80px;
  line-height: 80px;
  font-size: 27px;
  padding: 0;
}
.btn {
  margin-top: 81px;
  height: 89px;
  font-size: 28px;
}
.send {
  height: 80px;
  font-size: 27px;
  float: right;
}
#log {
  width: 579px;
  margin: 0 auto;
}
.pwd {
  display: block;
  border: none;
  border-bottom: 1px solid #cccccc;
  height: 80px;
  line-height: 80px;
  font-size: 27px;
  color: black;
  float: left;
  width: 100%;
}
#send {
  border: 1px solid #cccccc;
  float: right;
  display: block;
  height: 70px;
  line-height: 70px;
  font-size: 27px;
  color: #cccccc;
  background: none;
  margin-top: 15px;
}
.bg {
  background: blue;
}
</style>